<template>
	<div class="page_wrap">
		<div class="main">
			<div class="attribute_box">
				<section v-for="(x, indexX) in attrTableList">
					<div class="s_left">
						<div class="box">
							<b>{{x.attrTitle}}:</b>
							<el-select clearable size="mini" v-model="x.attrId" placeholder="请选择属性" style="width: 140px;" @change="optionChange">
								<el-option :disabled="item.is_forbid_select" v-for="item in x.attributeList" :key="item.value" :label="item.label" :value="item.id"></el-option>
							</el-select>
						</div>
					</div>
					<div class="s_right">
						<ul>
							<li v-for="(y, indexY) in x.attributeValuesList">
								<div class="check_box">
									<el-checkbox :disabled="y.forbid_check" v-model="y.is_check" @change="checkFN"></el-checkbox>
								</div>
								<div class="input_box">
									<el-input :disabled="y.forbid_input" size="mini" maxLength='50' v-model="y.attrValue" placeholder="请输入内容" @change="inputChange(x, indexX, y, indexY)"></el-input>
								</div>
							</li>
						</ul>
					</div>
				</section>
			</div>

			<div class="list_box">
				<el-table :data="skuTableList" border style="width: 100%">
					<el-table-column prop="skuKey" label="sku编号" align="center" width=""></el-table-column>
					<el-table-column prop="skuAttr" label="sku attr" align="center" width=""></el-table-column>
					<el-table-column fixed="right" label="库存" align="center" width="">
						<template slot-scope="scope">
							<el-input size="mini" maxLength="10" v-model="scope.row.inventory" placeholder="请输入库存" style="width: 100px" @change="recordFN"></el-input>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="价格" align="center" width="">
						<template slot-scope="scope">
							<el-input size="mini" maxLength="10" v-model="scope.row.goodsPricre" placeholder="请输入价格" style="width: 100px" @change="recordFN"></el-input>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="备注" align="center" width="">
						<template slot-scope="scope">
							<el-input size="mini" maxLength="200" v-model="scope.row.notes" placeholder="备注" style="width: 100px" @change="recordFN"></el-input>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="">
						<template slot-scope="scope">
							<!--<el-button type="text" size="small" @click="copyFN(scope.row, scope.$index)">复制</el-button>-->
							<el-button type="text" size="small" @click="delFN(scope.row, scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="footer">
			<div class="btn">
				<el-button size="mini" type="primary" @click="operationFN('ok')">确定</el-button>
			</div>
			<div class="btn">
				<el-button size="mini" type="" @click="operationFN(0)">取消</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabHeight: 1000,
				attrTableList: [],
				skuTableList: [], //sku列表
				skuTableList_record: [], //做记录功能
			}
		},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let arr = ['', '属性一', '属性二', '属性三', '属性四', '属性五', '属性六', '属性七', '属性八', '属性九', '属性十'];
				let options = [{
					id: '001',
					label: '颜色',
					is_forbid_select: false,
				}, {
					id: '002',
					label: '尺寸',
					is_forbid_select: false,
				}, {
					id: '003',
					label: '体积',
					is_forbid_select: false,
				}, {
					id: '004',
					label: '重量',
					is_forbid_select: false,
				}, {
					id: '005',
					label: '原产地',
					is_forbid_select: false,
				}, {
					id: '006',
					label: '口味',
					is_forbid_select: false,
				}, {
					id: '007',
					label: '内存',
					is_forbid_select: false,
				}];

				for(let i = 1; i <= 5; i++) {
					let obj = {
						attrTitle: arr[i],
						attrId: '',
						attributeList: options, //属性
						attributeValuesList: [], //属性下的属性值
					}
					for(let j = 1; j <= 8; j++) {
						let ob = {
							attrValue: '',
							index: i + '' + j,
							is_check: false, //false - 未选中
							forbid_check: true, //true - 禁止勾选
							forbid_input: true, //true - 禁止输入
						}
						obj.attributeValuesList.push(ob);
					}
					this.attrTableList.push(obj);
				}
			},
			//勾选 or 取消勾选 输入框
			checkFN(e) {
				this.attrTableList.forEach((x, indexX) => {
					x.attributeValuesList.forEach((y, indexY) => {
						if(y.is_check) {
							y.forbid_input = false;
						} else {
							y.forbid_input = true;
						}
					});
				});
				this.generateSku();
			},
			//输入框值得改变
			inputChange(x, indexX, y, indexY) {
				this.generateSku();
			},
			//选择属性
			optionChange() {
				let selectedList = [],
					setForbidOperation = () => {
						for(let x of this.attrTableList) {
							for(let y of x.attributeList) {
								selectedList.indexOf(y.id) !== -1 ? y.is_forbid_select = true : y.is_forbid_select = false;
							}
						}
					};

				this.attrTableList.forEach((x, indexX) => {
					if(x.attrId === "") {
						x.attributeValuesList.forEach((y, indexY) => {
							y.is_check = false;
							y.forbid_check = true;
							y.forbid_input = true;
						});
					} else {
						x.attributeValuesList.forEach((y, indexY) => {
							y.forbid_check = false;
						});
						selectedList.push(x.attrId);
					}
				});
				setForbidOperation(); //控制不让选择相同的属性
				this.generateSku();
			},
			//计算sku排列组合
			generateSku() {
				let sList = []; //统计打勾的输入框
				this.attrTableList.forEach((x, indexX) => {
					let arr = [];
					x.attributeValuesList.forEach((y, indexY) => {
						if(y.is_check && y.attrValue != '') arr.push(y);
					});
					sList.push(arr);
				});
				let indexList = []; //输入框的下标
				let valueList = []; //输入框的值
				for(let x of sList) {
					if(x.length) {
						let iList = [];
						let vList = [];
						for(let y of x) {
							iList.push(y.index);
							vList.push(y.attrValue);
						}
						indexList.push(iList);
						valueList.push(vList);
					}
				}
				let indexArr = this.descartesCalculate(indexList);
				let valueArr = this.descartesCalculate(valueList);
				this.skuTableList = [];
				for(let i in indexArr) {
					//生成sku列表
					let obj = {
						skuKey: indexArr[i].join(','),
						skuAttr: valueArr[i].join(','),
						inventory: 100, //库存
						goodsPricre: 0, //价格
						notes: '', //备注
					};
					this.skuTableList.push(obj);
				}
				this.recordFN();
			},
			//记忆功能
			recordFN() {
				let skuReadyList = [];
				for(let x of this.skuTableList) {
					let n = 0;
					for(let y of this.skuTableList_record) {
						if(x.skuKey == y.skuKey) n++, y.skuAttr = x.skuAttr;
					}
					if(n == 0) this.skuTableList_record.push(x);
				}
				for(let x of this.skuTableList_record) {
					for(let y of this.skuTableList) {
						if(x.skuKey == y.skuKey) skuReadyList.push(x);
					}
				}
				this.skuTableList = skuReadyList;
			},
			//笛卡尔积算法  - 参数格式 [['1', '2', '3'],['a', 'b', 'c']]
			descartesCalculate(array) {
				if(array.length < 2) {
					let list = [];
					for(let x of array) {
						for(let y of x) {
							let arr = [];
							arr.push(y);
							list.push(arr);
						}
					}
					return list;
				}
				//if(array.length < 2) return array[0] || []; //旧
				return [].reduce.call(array, function(col, set) {
					var res = [];
					col.forEach(function(c) {
						set.forEach(function(s) {
							var t = [].concat(Array.isArray(c) ? c : [c]);
							t.push(s);
							res.push(t);
						})
					});
					return res;
				});
			},
			//复制
			copyFN(item, index) {
				console.log(item, index)
			},
			//删除
			delFN(item, index) {
				console.log(item, index);
				this.skuTableList.splice(index, 1);
			},

			operationFN(sign) {
				if(sign == 'ok') {
					this.$emit('operationFN', 'ok', '确定');
				} else {
					this.$emit('operationFN');
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.wrapper {
		position: relative;
	}
	
	.main {
		height: 80vh;
		overflow: auto;
	}
	
	.attribute_box {
		padding: 0 20px 10px 20px;
		section {
			display: flex;
			justify-content: flex-start;
			.s_left {
				margin: 0 30px 0 0;
				.box {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					b {
						margin: 0 6px 0 0;
					}
				}
			}
			.s_right {
				flex: 1;
				ul {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					li {
						margin: 0 15px 10px 0;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						input {
							margin: 0 10px 0 0;
						}
						.check_box {
							margin: 0 6px 0 0;
						}
						.input_box {
							width: 140px;
						}
					}
				}
			}
		}
	}
	
	.list_box {
		padding: 0 0 100px 0;
	}
	
	.footer {
		margin: 20px 0 0 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.6);
		/*position: fixed;
		bottom: 0;
		z-index: 10;
		right: 0;*/
		.btn {
			margin: 5px 10px;
		}
	}
</style>